<script setup lang="ts">
import { ref, watch } from 'vue';

// 定义接收的 props
interface ScrollBoardProps {
  chartData: {
    header: string[]; // 表头
    data: string[][]; // 表格数据
  };
}

const props = defineProps<ScrollBoardProps>();

// 配置表格的默认值
const defaultColumnWidth = ['140', '100', '90', '90', '90'];
const config = ref({
  header: props.chartData.header || [],
  data: props.chartData.data || [],
  align: Array(props.chartData.header?.length || 5).fill('center'),
  headerBGColor: '#0f1325',
  columnWidth: defaultColumnWidth,
  headerHeight: 35,
  rowNum: 8,
});
// 监听 props 数据变化，动态更新配置
watch(
  () => props.chartData,
  (newChartData) => {
    config.value = {
      ...config.value,
      header: newChartData.header || [],
      data: newChartData.data || [],
    };
  },
  { deep: true }
);
</script>

<template>
  <div style="padding: 0 5px; box-sizing: border-box; height: calc(100% - 50px)">
    <dv-scroll-board :config="config" />
  </div>
</template>

<style>
.dv-scroll-board .rows .row-item .cell {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 180px !important;
  width: 180px !important;
  min-width: 180px !important;
  box-sizing: border-box !important;
}
</style>
